<%- include header %>
<style type="text/css">
	.panel_toolbox>li>a:hover {
	    background: #1479B8;
	}
</style>
<!-- page content -->
<div class="right_col" role="main">

    <div class="">
        <div class="page-title">
        </div>
        <div class="clearfix"></div>

        <div class="row">
        	<!-- <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="文物名称、登录号、编目等">
                    <span class="input-group-btn">
                        <button class="btn btn-success" type="button" style="color:#fff">搜索</button>
                    </span>
                </div>
            </div> -->
            <div class="col-md-12 col-sm-12 col-xs-12">
            	<div class="x_panel">
                    <div class="x_title">
                        <ul class="breadcrumb">
                            <li>
                                <a href="/admin/index">
                                    <i class="fa fa-home"></i>&nbsp;首页&nbsp;&nbsp;
                                </a>
                            </li>
                            <li class="active">
                                <i class="fa fa-id-card-o"></i>&nbsp;卡片管理
                            </li>
                            <li class="active">
                                卡片列表
                            </li>
                            <a href="/admin/card/add" type="button" class="navbar-right btn btn-primary btn-xs"><i class="fa fa-plus-square"></i> 新增卡片 </a>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <!-- start project list -->
                        <table class="table table-striped responsive-utilities jambo_table bulk_action">
                            <thead>
                                <tr>
                                    <th>排序序号</th>
                                    <th>卡片标题</th>
                                    <th>卡片文字</th>
                                    <th>背景图片</th>
                                    <th>完成图片</th>
                                    <th>分享者</th>
                                    <th style="min-width: 80px;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                    <% if(cards){%>
                                    <% if(cards.length>0){ var i =0;%>
                                    <% cards.forEach(function(card){ %>
                                    <% i++ %>
                                    <tr name="tr_<%= card._id %>">
                                    <td><%= card.indexNum || 0 %></td>
                                    <td><%= card.cardTitle %></td>
                                    <td><%= card.cardMessage %></td>
                                    <td>
                                    	<ul class="list-inline">
                                            <li data-toggle="modal" data-target=".bs-example-modal-lg2" onclick="show('<%= card.cardUrl %>')">
                                                <img src="<%= card.cardUrl %>" alt="<%= card.cardTitle %>" class="avatar" alt="Avatar">
                                            </li>
                                        </ul>
                                    </td>
                                    <td>
                                        <ul class="list-inline">
                                            <li data-toggle="modal" data-target=".bs-example-modal-lg2" onclick="show('<%= card.completeUrl %>')">
                                                <img src="<%= card.completeUrl ||"/images/user.png" %>" class="avatar">
                                            </li>
                                        </ul>
                                    </td>
                                    <td><%= card.nickname ||  card.weapp_openid %></td>
                                    <td>
                                        <div class="btn-group">
                                            <a title="编辑" href="/admin/card/edit?imageShare_id=<%= card._id %>" class="btn btn-default btn-xs"><i class="fa fa-pencil"></i>&nbsp;编辑</a>
                                            <% if(card.display){ %>
                                            <a title="取消推荐" onclick="cancel('<%= card._id %>')" class="btn btn-primary btn-xs"><i class="fa fa-mail-reply"></i>&nbsp;取消推荐</a>
                                            <% }else{ %>
                                            <a title="推荐" onclick="cancel('<%= card._id %>',1)" class="btn btn-primary btn-xs"><i class="fa fa-mail-forward"></i>&nbsp;推荐</a>
                                            <% } %>
                                            <a title="删除" onclick="del('<%= card._id %>')" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
                                        </div>
                                    </td>
                                    </tr>
                                    <% }) %>
                                    <% }} %>
                            </tbody>
                        </table>
                        <!-- end project list -->

                        </br>
                        <% if(cards){ %>
                        <% thisPage=parseInt(thisPage);var total = total;var pages = Math.ceil(total/10);var page_f = 1; var page_p = thisPage-1;var page_n = thisPage+1;var page_l = Math.ceil(total/10);%>
                        <div class="dataTables_paginate paging_full_numbers" id="example_paginate">
                            <% if(thisPage<=1){ %>
                            <a tabindex="0" class="first paginate_button paginate_button_disabled" id="example_first">首页</a>
                            <% }else{ %>
                            <a tabindex="0" class="first paginate_button paginate_button" id="example_first" href="/admin/card/list?page=1">首页</a>
                            <% } %>
                            <% if(thisPage<=1){ %>
                            <a tabindex="0" class="previous paginate_button paginate_button_disabled" id="example_previous">上一页</a>
                            <% }else{ %>
                            <a tabindex="0" class="previous paginate_button paginate_button" id="example_previous" href="/admin/card/list?page=<%= page_p %>">上一页</a>
                            <% } %>
                            <span>
                                <%var n1 = pages;%>
                                <% if(n1<5){ %>
                                    <% for(var i=1;i<=n1;i++){ %>
                                        <% if(i==thisPage){ %>
                                        <a tabindex="0" class="paginate_active" href="/admin/card/list?page=<%= i %>"><%= i %></a>
                                        <% }else{ %>
                                        <a tabindex="0" class="paginate_button" href="/admin/card/list?page=<%= i %>"><%= i %></a>
                                        <% } %>
                                    <% } %>
                                <% }else{ %>
                                    <% for(var i=1;i<=5;i++){ %>
                                        <% if(i==thisPage){ %>
                                        <a tabindex="0" class="paginate_active" href="/admin/card/list?page=<%= i %>"><%= i %></a>
                                        <% }else{ %>
                                        <a tabindex="0" class="paginate_button" href="/admin/card/list?page=<%= i %>"><%= i %></a>
                                        <% } %>
                                    <% } %>
                                    <a tabindex="0" class="paginate_button">...</a>
                                    <% if(page_l==thisPage){ %>
                                        <a tabindex="0" class="paginate_active" href="/admin/card/list?page=<%= page_l %>"><%= page_l %></a>
                                    <% }else{ %>
                                        <a tabindex="0" class="paginate_button" href="/admin/card/list?page=<%= page_l %>"><%= page_l %></a>
                                    <% } %>
                                <% } %>
                            </span>
                            <% if(page_n>pages){ %>
                            <a tabindex="0" class="next paginate_button_disabled" id="example_next">下一页</a>
                            <% }else{ %>
                            <a tabindex="0" class="next paginate_button" id="example_next" href="/admin/card/list?page=<%= page_n %>">下一页</a>
                            <% } %>
                            <% if(page_l==thisPage){ %>
                            <a tabindex="0" class="last paginate_button_disabled" id="example_last">尾页</a>
                            <% }else{ %>
                            <a tabindex="0" class="last paginate_button" id="example_last" href="/admin/card/list?page=<%= page_l %>">尾页</a>
                            <% } %>
                        </div>
                        <% } %>
                    </div>
                </div> 
            </div>
        </div>
    </div>
    <div class="modal fade bs-example-modal-lg2" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body" id="ex1" style="text-align: center;">
                    <img src="" style="width: 100%;max-width: 400px;" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- footer content -->
    
    <!-- /footer content -->

</div>
<!-- /page content -->
<%- include bottom %>
<script src="/js/zoom/jquery.zoom.js"></script>
<script type="text/javascript">
    function show(url){
        $('#ex1 >img').attr('src',url);
        //$('#ex1').zoom();
    }

    function del(id) {
        var postData = {imageShare_id: id};
        if (confirm("真的要删除这项吗？")) {
            $.ajax({
                type: 'post',
                url: '/admin/card/del',
                data: postData,
                dataType: 'json',
                success: function(data) {
                    if(!data.status) {
                        return alert(data.message);
                    }
                    $('tr[name="tr_'+id+'"]').remove();
                }
            })
        }
    }

    function cancel(id,type) {
        var postData = {imageShare_id: id,type:type};
        if (confirm("真的要操作这项吗？")) {
            $.ajax({
                type: 'post',
                url: '/admin/card/recommend',
                data: postData,
                dataType: 'json',
                success: function(data) {
                    if(!data.status) {
                        return alert(data.message);
                    }
                    $('tr[name="tr_'+id+'"]').remove();
                }
            })
        }
    }
</script>
<%- include footer %>